<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>设置</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<link rel="stylesheet" type="text/css" href="../../build/css/mui.picker.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
	<script src="../../build/js/jquery.min.js"></script>
	<script src="../../build/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../build/js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../build/js/mine/city.data.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="container">
		<ul class="edit-list">
			<li class="edit-head">
				<a id='addPic' href="" v-on:click="addPic" style="display:block;">
					<i>头像</i>
					<img v-bind:src="image">
					<span class="iconfont">&#xe61d;</span>
				</a>
				<input type="file" @change="onFileChange" style="display: none;" name="picture" id="picture">
			</li>
			<li class="normal-text">
					<i>昵称</i>
					<input type="text" v-model="name">
					<span class="iconfont cancel-btn">&#xe636;</span>
			</li>
			<li>
					<i>真实姓名</i>
					<input type="text" v-model="realName" readonly class="realName">
			</li>
			<li>
					<i>性别</i>
					<input type="text" id="genderBtn" v-model="gender" readonly>
					<span class="iconfont">&#xe61d;</span>
			</li>
			<li>
					<i>手机</i>
					<input type="text" v-model="mobile" readonly>
					<!-- <span class="iconfont">&#xe61d;</span> -->
			</li>
			<li class="normal-text">
					<i>邮箱</i>
					<input type="email" v-model="email">
					<span class="iconfont cancel-btn">&#xe636;</span>
			</li>
			<li>
					<i>地区</i>
					<input type="text" id="cityBtn" v-model="city" readonly>
					<span class="iconfont">&#xe61d;</span>
			</li>
			<li class="input-textarea">
					<i>个人介绍</i>
					<textarea v-model="introduction" maxlength="50"></textarea>
					<p>{{limitWord}}/50</p>
			</li>
		</ul>

		<div class="btn-wrap">
			<button class="primary-btn" type="button" @click="upData">保 存</button>
		</div>
	</div>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		picture:'',
		gender:'',
		life:'',
		city:'',
		genderValue:'',
		cityCode:'',
		name:'',
		email:'',
		mobile:'',
		organization:'',
		introduction:'',
		limitWord:0,
		image:'',
		realName:'',
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.normalText();
			vm.getData()
		})
	},
	watch:{
			introduction:function(val,oldval){
				if(val.length != 'undefined'){
					vm.limitWord=val.length;
				}
			},
	},/*
	computed:{
		limit:function(){
			return this.introduction+'123'
		}
	},*/
	methods:{
		getData:function(){
			noParamsGet('/advisor/financial-advisor/info',function(res){
				var info = res.data;
				var userInfo = res.data.user;
				vm.name = userInfo.name;
				vm.mobile = userInfo.mobile;
				vm.organization = info.organization? info.organization : '';
				vm.picture = info.picture;
				vm.genderValue = userInfo.gender?userInfo.gender:'请选择性别';
				if(vm.genderValue=='UNKNOW'){
					vm.genderValue='请选择性别'
					vm.gender='请选择性别'
				}
				vm.email=userInfo.email?userInfo.email:'';
				vm.introduction = info.introduction ? info.introduction : '';
				vm.realName=userInfo.realName ? userInfo.realName:'去实名';
				if(! userInfo.realName){
					$('.realName').click(function(event) {
						window.location.href='noCard.html'
					});
				}
				vm.cityCode = info.location ? info.location: '';
				vm.image =res.data.user.picture ? res.data.user.picture : '../../build/images/touxiang.png';
				vm.picker();
			})
		},
		upData:function(){
			if(vm.email=='' || check(vm.email)==true){
				post('/advisor/financial-advisor/update',{
					name:vm.name,
					email:vm.email,
					gender:vm.genderValue,
					location:vm.cityCode,
					organization:vm.organization,
					introduction:vm.introduction,
				},function(res){
					toast('保存成功');
					setTimeout('window.location.href="edit.html"', 1000)
				})
			}
		},
		normalText:function(){
			var normalInput = document.querySelectorAll('.normal-text input');

			for(var i=0;i<normalInput.length;i++){
				normalInput[i].addEventListener('focus',function(){
					var cancelBtn = document.querySelectorAll('.cancel-btn');
					for(var j=0;j<cancelBtn.length;j++){
						cancelBtn[j].style.display = 'none';
					}
					var parent = this.parentNode;
					var activeBtn = parent.querySelector('.iconfont');
					activeBtn.style.display = 'block';
					$this = this;
					activeBtn.addEventListener('click',function(){
						$this.value = '';
					},false)
				})
			}
		},
		picker:function(){
			var gender = [
				{text:'男',value:'MALE'},
				{text:'女',value:'FEMALE'},
				// {text:'保密',value:'UNKNOW'},
			]
		//渲染picker数据
		vm.showData(gender);
		//性别picker
			var genderPicker = new mui.PopPicker();								//初始化
			genderPicker.setData(gender);											//赋值数据
			var genderBtn = document.getElementById('genderBtn');	//触发开启
			genderPicker.pickers[0].setSelectedValue(vm.genderValue,1000);
			genderBtn.addEventListener('tap',function(event) {
				genderPicker.show(function(items) {
					vm.genderValue = items[0].value;
					vm.gender = items[0].text;
				});
			}, false);
		//地区picker
			var cityPicker = new mui.PopPicker({layer:2},{buttons:['取消','确定']});
			var cityBtn = document.getElementById('cityBtn');
			cityPicker.setData(cityData);
			var proviceCode = vm.cityCode.slice(0,2)+'0000';
			cityPicker.pickers[0].setSelectedValue(proviceCode,600);
			setTimeout(function() {
				cityPicker.pickers[1].setSelectedValue(vm.cityCode,1000)
			},800);

			cityBtn.addEventListener('tap', function(event) {
					cityPicker.show(function (items) {
						vm.city = items[0].text + " " + items[1].text;
						vm.cityCode = items[1].value;
			  	})
			}, false);
		},
		showData:function(gender,work,life){
			for(var i=0;i<gender.length;i++){
				if(vm.genderValue == gender[i].value){
					vm.gender = gender[i].text;
				}
			}
			for(var i=0;i<cityData.length;i++){
				var proviceCode = vm.cityCode.slice(0,2)+'0000';
				if(cityData[i].value == proviceCode){
					var provice = cityData[i].text;
					for(var j=0;j<cityData[i].children.length;j++){
						if(cityData[i].children[j].value == vm.cityCode){
							provice+= '  '+cityData[i].children[j].text;
							vm.city = provice;
						}
					}
				}
			}

		},
		// 上传图片
		addPic(e){
            e.preventDefault();
            $('input[type=file]').trigger('click');
            return false;
        },
        onFileChange(e){
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) return; 
            this.createImage(files);
            if(files !=''){	
	            upload('/user/picture', "picture", vm.file[0], function(res){
				});
            }
        },
        createImage(file){
            if(typeof FileReader==='undefined'){
                alert('您的浏览器不支持图片上传，请升级您的浏览器');
                return false;
            }
            var image = new Image();         
            var vm = this;
            var leng=file.length;
            vm.file=file;
            for(var i=0;i<leng;i++){
                var reader = new FileReader();
                reader.readAsDataURL(file[i]); 
                reader.onload =function(e){
                	vm.image=e.target.result; 
					if(vm.image != ''){
						$('#nodisabled').show();
						$('#disabled').hide();
					}                                 
                };                 
            }                        
        },
	}
})

</script>
</body>
</html>
